import { View, Text, ScrollView, TouchableWithoutFeedback, Image, StyleSheet } from 'react-native'
import React, { useEffect, useState } from 'react'
import { apiGet } from '../../apis/request'
import { Card, WhiteSpace, WingBlank } from '@ant-design/react-native';

const DEFAULT_AVATAR = "https://p9-passport.byteacctimg.com/img/user-avatar/8066733f1e29e64bc8fd982783883b1b~300x300.image";
const DEFAULT_BRIEF = "这个人什么都没留下……"

const News = ({ navigation }) => {

    const [list, setList] = useState([])

    useEffect(() => {
        apiGet({ path: 'list' }).then(res => {
            const { data = [] } = res;
            const _list = data.filter(item => item?.item_info?.article_info?.cover_image && 
                item?.item_info?.author_user_info
            ).map(item => ({
                title: item?.item_info?.article_info?.title,
                cover_image: item?.item_info?.article_info?.cover_image,
                author: item?.item_info?.author_user_info?.user_name,
                avatar: item?.item_info?.author_user_info?.avatar_large || DEFAULT_AVATAR,
                brief_content: item?.item_info?.article_info?.brief_content || DEFAULT_BRIEF,
            }))

            setList(_list)
        })
    }, [])

  return (
    <ScrollView>
      {
        list.map((item, idx) => <NewItem key={idx} item={item} navigation={navigation} />)
      }
    </ScrollView>
  )
}


const NewItem = ({ item, navigation }) => {
    return <TouchableWithoutFeedback
        onPress={(e) => navigation.navigate({ name: "Search", params: item })}
    >
    <View>
        <WingBlank size="md" >
            <Card>
                <Card.Header title={item.title}></Card.Header>
                <Card.Body>
                    <Image source={{ uri: item.cover_image }} style={styles.img} />
                </Card.Body>
                <Card.Footer 
                    content={
                        <Image source={{ uri: item.avatar }} style={styles.avatar} />
                    }
                    extra={item.author}
                />
            </Card>
        </WingBlank>
        <WhiteSpace size="md" />
    </View>
    </TouchableWithoutFeedback>
}

const styles = StyleSheet.create({
    img: {
        width: "100%",
        height: 200,
        resizeMode: "cover"
    },
    avatar: {
        width: 30,
        height: 30
    }
})

export default News